import React, { Component } from 'react';
import { StyleSheet, Platform } from 'react-native';
import { Container, View, Button, Icon, Fab, Text } from 'native-base';

import { connect } from 'react-redux';
import { WebView } from 'react-native-webview';

import { Colors, Metrics } from '../theme';
import { Header, Loading } from './index';

class UpWebView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isTrue: true,
      isFalses: false,
      activeBtn: false
    }
  }

  // 生命周期组件
  componentDidMount() {

  }

  /**
   * WebView 加载成功
   */
  onLoad() {

  }

  /**
   * WebView 加载完成
   */
  onLoadEnd() {

  }

  render() {
    return (
      <View style={Styles.contents}>
        {
          this.props.webViewUri ?
            <WebView
              ref="webView"
              source={Platform.OS === 'android' ? { uri: this.props.webViewUri, baseUrl: "" } : { uri: this.props.webViewUri }}
              mixedContentMode="always"
              mediaPlaybackRequiresUserAction={this.state.isFalses}
              // allowsInlineMediaPlayback={this.state.isFalses}
              renderLoading={() => <Loading />}
              onLoad={() => this.onLoad()}
              onLoadEnd={() => this.onLoadEnd()}
            />
            :
            <View><Loading /></View>
        }

        {
          this.props.webViewType != 'game' ?
            <Fab
              active={this.state.activeBtn}
              direction="up"
              containerStyle={{ width: 45 }}
              style={{ backgroundColor: Colors.subject }}
              position="bottomRight"
              onPress={() => this.setState({ activeBtn: !this.state.activeBtn })}>
              <Icon type="FontAwesome" name="tachometer" style={Styles.boxIcons} />
              <Button onPress={() => this.refs['webView'].goBack()} style={{ backgroundColor: Colors.subject, width: 30, height: 30 }}>
                <Icon type="FontAwesome" name="chevron-left" style={Styles.boxIcons} />
              </Button>
              <Button onPress={() => this.refs['webView'].goForward()} style={{ backgroundColor: Colors.subject, width: 30, height: 30 }}>
                <Icon type="FontAwesome" name="chevron-right" style={Styles.boxIcons} />
              </Button>
              <Button onPress={() => this.refs['webView'].reload()} style={{ backgroundColor: Colors.subject, width: 30, height: 30, margin: 0, padding: 0 }}>
                <Icon type="FontAwesome" name="refresh" style={Styles.boxIcons} />
              </Button>
              <Button onPress={() => this.props.navigation.goBack()} style={{ backgroundColor: Colors.subject, width: 30, height: 30 }}>
                <Icon type="FontAwesome" name="home" style={Styles.boxIcons} />
              </Button>
            </Fab>
            :
            <Text></Text>
        }

      </View>
    );
  }
}

const Styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20,
  },
  contents: {
    flex: 1,
  },
  boxIcons: {
    fontSize: 18,
    color: Colors.bai,
  },
})

const mapStateToProps = state => ({
  webViewUri: state.global.webViewUri,
  webViewType: state.global.webViewType,
});

const mapDispatchToProps = dispatch => ({

});

export default connect(mapStateToProps, mapDispatchToProps)(UpWebView);

